<template>

    <div v-if="ishavedata" >
        <el-dialog title="打印预览" :visible.sync="dialogFormVisible" @close="QualityDialogClose">
            <el-button type="primary" v-print="printObj">打印</el-button>
            <div id="printMe">
            <div style="font-size: 20px;text-align: center;">江苏翔源玻璃制品有限公司采购订单</div>
            <div class="table-list" style="display:flex">
                <div style="width: 270px;">采购单号:&nbsp;&nbsp; 12345678910</div>
                <div style="width: 260px;">单据日期:&nbsp;&nbsp;2022-060-13</div>
                <div style="width: 200px;">业务类型:&nbsp;&nbsp;普通采购</div>
                <div style="width: 270px;">供应商:&nbsp;&nbsp;张三</div>
                <div style="width: 260px;">部门:&nbsp;&nbsp;采购部</div>
                <div style="width: 200px;">备注:&nbsp;&nbsp;无备注</div>
            </div>
            <el-table ref="singleTable" :data="tableData"  style="width: 100%" max-height="500">
                        <el-table-column prop="GoodsCode" label="物料编号" width="120">
                        </el-table-column>
                        <el-table-column prop="GoodsName" label="物料名称" width="120">
                        </el-table-column>
                        <el-table-column prop="GoodsSpec" label="物料规格" width="120">
                        </el-table-column>
                        <el-table-column prop="Manufacturer" label="生产厂家" width="300">
                        </el-table-column>
                        <el-table-column prop="Logogram" label="助记码">
                        </el-table-column>
                        <el-table-column prop="unit" label="单位">
                        </el-table-column>
                        <el-table-column prop="WmsMeas" label="大包装">
                        </el-table-column>
                        <el-table-column prop="MidMeas" label="中包装">
                        </el-table-column>
                        <el-table-column prop="SaleMan" label="采购员">
                        </el-table-column>
                        <el-table-column prop="ApprovalNo" label="批准文号" width="160">
                        </el-table-column>
                        <el-table-column prop="LastStfId" label="更新人">
                        </el-table-column>
                    </el-table>
                    </div>
        </el-dialog>
        
    </div>

    <!-- <el-button type="primary" @click="dialogFormVisible = true">打印</el-button> -->
 
</template>

<script>
export default {
    name: "QualityDialog",
    props: {
        QualityDialogFlag: {
            default: false
        }
    },
    data() {
        return {
            ishavedata: true,
            tableData: [
                {
                    GoodsCode: '1111',
                    GoodsName: '1111',
                    GoodsSpec: '2222',
                    Manufacturer: '生产厂家',
                    Logogram: 'zdj',
                    unit: '盒',
                    WmsMeas: '11',
                    MidMeas: '2',
                    SaleMan: '2',
                    ApprovalNo: '222',
                    LastStfId: '222'
                }
            ],
            dialogFormVisible: false,
            printObj:{
                id: "printMe", //打印区域 Dom ID
                popTitle: '江苏翔源玻璃制品有限公司', //打印的标题
                extraCss: '',  //打印可引入外部的一个css文件
                extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', // 打印头部文字附加在head标签上的额外标签//可以传进去 style tag 标签；注意要逗号分隔 解决特定区域不显示问题；
                preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
                previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
                previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
                zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）   
                previewBeforeOpenCallback() {
                    console.log("预览窗口打开之前的callback（开启预览模式调用）")
                }, //预览窗口打开之前的callback（开启预览模式调用）
                previewOpenCallback() {
                    console.log("预览窗口打开之后的callback（开启预览模式调用）")
                }, // 预览窗口打开之后的callback（开启预览模式调用）
                beforeOpenCallback() {
                    console.log("开启打印前的回调事件")
                }, // 开启打印前的回调事件
                openCallback() {
                    console.log("调用打印之后的回调事件")
                }, // 调用打印之后的回调事件
                closeCallback() {
                    console.log("关闭打印的回调事件（无法确定点击的是确认还是取消）")
                } //关闭打印的回调事件（无法确定点击的是确认还是取消）
            }
        }
  },
  methods: {
    QualityDialogClose() {
            this.$emit("update:QualityDialogFlag", false);
        }
  },
  watch: {
        QualityDialogFlag() {
            this.dialogFormVisible = this.QualityDialogFlag
        }
    }
}
</script>

<style>
</style>